<template>
	<view class="content">
		<view class="head_bg">
			<image src="../../static/img/login/head_nav.png"></image>
		</view>
		<view class="font_tip">
			<text style="margin-bottom: 26rpx;">仅用于公安审核</text>
			<text>拍摄时请确保身份证<span style="font-weight: 600;">边框完整、字迹清晰、亮度均衡</span></text>
			<text style="margin-top: 26rpx;">提示信息：请拍摄身份证实物，勿拍摄照片</text>
		</view>
		<view class="id_card">
			<view class="card_face">
				<image :src="imgSrcF" mode="" @click="takeFornt(isPhotoF)"></image>	
				<text>正面：<span style="color: #007AFF;">拍摄后点击上方照片可进入编辑页面</span></text>
			</view>
			<view class="card_face">
				<image :src="imgSrcB" mode="" @click="takeBack(isPhotoB)"></image>
				<text>背面：<span style="color: #007AFF;">拍摄后点击上方照片可进入编辑页面</span></text>
			</view>
		</view>
		<view class="ocr-btn">
			<button type="primary" @click="go_ocr">OCR识别</button>
		</view>		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgSrcF: '../../static/img/idCard/card_front.png',
				imgSrcB: '../../static/img/idCard/card_back.png',
				isPhotoF: false,
				isPhotoB: false,
				
			}
		},
		methods: {
			//拍摄身份证正面照片  编辑
			takeFornt(takeStatus) {
				if(!takeStatus) {
					uni.chooseImage({
						count: 1, //默认9
					    sizeType: ['original', 'compressed'], 
					    sourceType: ['camera'], 
					    success: res => {
								let {tempFilePaths, tempFiles} = res //或取拍摄照片的路径个文件对象
								console.log(tempFilePaths)
								this.$store.commit("picturePath",tempFilePaths[0])	//存储在vuex
								this.$store.commit("pictureStatus", "cardFront")
								this.imgSrcF = tempFilePaths[0]
								this.isPhotoF = true
					    }
					});
					return
				}
				this.$store.commit("pictureStatus", "cardFront")
				uni.navigateTo({
					url: '/pages/editCard/editCard' //再次点击进入编辑页面
				})	
			},	
				
			//拍摄身份证背面照片
			takeBack(takeStatus) {
				if(!takeStatus) {
					uni.chooseImage({
						count: 1, //默认9
					    sizeType: ['original', 'compressed'], 
					    sourceType: ['camera'], 
					    success: res => {
							let {tempFilePaths, tempFiles} = res //或取拍摄照片的路径个文件对象
							this.$store.commit("pictureBackPath", tempFilePaths[0])	//存储在vuex
							this.$store.commit("pictureStatus", "cardBack") 
							this.imgSrcB = tempFilePaths[0]
							this.isPhotoB = true
					    }
					});
					return
				}
				this.$store.commit("pictureStatus", "cardBack")
				uni.navigateTo({
					url: '/pages/editCard/editCard' //再次点击进入编辑页面
				})	
			},
			
			//OCR识别 
			go_ocr() { 
				// 调用识别接口
				
				uni.navigateTo({
					url: '/pages/cardResult/cardResult'
				})
			},
			changPicStatus() {
				const picStatus = this.$store.state.pictureStatus
				if(!picStatus) {
					return
				}
				if(picStatus === 'cardFront') {
					this.imgSrcF = this.$store.state.editFrontImgPath ? this.$store.state.editFrontImgPath : this.$store.state.picturePath
					this.isPhotoF = true
				}
				if(picStatus === 'cardBack') {
					this.imgSrcB = this.$store.state.editBackImgPath ? this.$store.state.editBackImgPath : this.$store.state.pictureBackPath
					this.isPhotoB = true
				}
			}
		},
		onShow() {
			this.changPicStatus()
		},
		onLoad() {
			
		}
		
	}
</script>

<style lang="scss">
	.content {
		background-color: #F1EFF2;
		box-sizing: border-box;
	}
	.head_bg{ width: 100%; box-sizing: border-box;}
	.head_bg image{ width: 100%; height: 128rpx; display: block;}
	.font_tip{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: 28rpx;
		color: #7c7c7c;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		text-align: center;
	}
	.id_card{
		width: 100%;
		overflow-y: auto;
		.card_face{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #FFFFFF;
			height: 360rpx;
			width: 100%;
			image{
				width: 308rpx;
				height: 203rpx;
			}
			text{
				padding-top: 20rpx;
				font-size: 30rpx;
			}
		}
		.card_face:nth-child(2){
			margin-top: 6rpx;
		}
	}
	.ocr-btn{
		padding-top: 30rpx;
		padding-bottom: 30rpx;	
		width: 100%;
		button {
			width: 80%;
			height: 84rpx;
			line-height: 84rpx;
			border-radius: 44rpx;
			font-size: 32rpx;
			background: linear-gradient(#e5b54e, #e5b54e);
		}
	}
</style>
